import { Table, Input, Button } from "antd";
import { PlusOutlined, MinusOutlined, ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import type { optionType } from "@/types/index";

interface BasicsEditorProps {
  option: optionType[];
  optionAddClick?: (ix: number) => void;
  optionRemoveClick?: (ix: number, id: number) => void;
  optionMoveClick?: (ix: number, direction: string) => void;
}

export default function BasicsEditor({ option = [], optionAddClick = () => {}, optionRemoveClick = () => {}, optionMoveClick = () => {} }: BasicsEditorProps) {
  const columns: ColumnsType<optionType> = [
    {
      title: "选项文字",
      dataIndex: "id",
      align: "center",
      render: (_, record, index) => (
        <>
          <Input value={record.content} onChange={e => (record.content = e.target.value)} style={{ width: "80%" }} />
          <span className="option-icon">
            <PlusOutlined onClick={() => optionAddClick(index)} />
          </span>
          <span className="option-icon">
            <MinusOutlined onClick={() => optionRemoveClick(index, record.id)} />
          </span>
        </>
      )
    },
    {
      title: "上下移动",
      dataIndex: "id",
      align: "center",
      render: (_, __, index) => (
        <>
          <span className="option-icon">
            <ArrowUpOutlined onClick={() => optionMoveClick(index, "上")} />
          </span>
          <span className="option-icon">
            <ArrowDownOutlined onClick={() => optionMoveClick(index, "下")} />
          </span>
        </>
      )
    }
  ];
  return (
    <>
      <Table dataSource={option} columns={columns} rowKey={record => record.id} pagination={false}></Table>
      <div className="option-add">
        <Button type="link" size="large" onClick={() => optionAddClick(-1)}>
          添加选项
        </Button>
        <Button type="link" size="large" onClick={() => optionAddClick(-2)}>
          批量添加
        </Button>
      </div>
    </>
  );
}
